<style>
    .redBall {
        height: 100px;
        width: 100px;
        font-size: 50px;
        line-height: 100px;
        text-align: center;
        background-color: red;
        float: left;
        border-radius: 50%;
        margin: 10px;
    }
    
    .blueBall {
        height: 100px;
        width: 100px;
        font-size: 50px;
        line-height: 100px;
        text-align: center;
        background-color: blue;
        float: left;
        border-radius: 50%;
        margin: 10px;
    }
    
    .ball-wrapper button {
        height: 30px;
        width: 100px;
        cursor: pointer;
        font: 16px;
        outline: none;
        border: none;
        border-radius: 5px;
        background-color: blue;
        color: #fff;
        text-align: center;
    }
</style>
<div class="ball-wrapper">
    <ul class="red-wrapper">
        <div class="redBall">1</div>
        <div class="redBall">2</div>
        <div class="redBall">3</div>
        <div class="redBall">4</div>
        <div class="redBall">5</div>
    </ul>
    <ol class="blue-wrapper">
        <div class="blueBall">6</div>
        <div class="blueBall">7</div>
    </ol>
    <!-- <div class="redBall">1</div>
    <div class="redBall">2</div>
    <div class="redBall">3</div>
    <div class="redBall">4</div>
    <div class="redBall">5</div>
    <div class="blueBall">6</div>
    <div class="blueBall">7</div> -->
    <button class="start-btn">随机选号</button>
    <button class="end-btn">停止</button>
</div>

<script>
    let timer = null;

    function init() {
        initEvent()
    }

    function initEvent() {
        $('.start-btn').on('click', startBtnClick)
        $('.end-btn').on('click', endBtnClick)
    }

    function startBtnClick() {
        if (timer) {
            clearInterval(timer);
        }
        timer = setInterval(() => {
            let redArr = fillBall(32, 5)
            let blueArr = fillBall(16, 2)

            fillHtml('.redBall', redArr)
            fillHtml('.blueBall', blueArr)
        }, 50)
    }

    function endBtnClick() {
        clearInterval(timer);
    }

    function fillHtml(el, arr) {
        arr.forEach((item, index) => {
            $(el).eq(index).html(item);
        })
    }

    function fillBall(max, len) {
        let arr = [];
        for (let i = 0; i < len; i++) {
            let num = Math.floor(Math.random() * max + 1);
            if (arr.includes(num)) {
                i--;
                continue;
            }
            arr.push(num)
        }
        return arr;
    }

    // 初始化业务片段
    init()
</script>